<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画</title>
    <style>
      .btn-container {
        line-height: 300px;
        height: 300px;
        text-align: center;
      }
      .btn-container > button {
        cursor: pointer;
        width: 50px;
        height: 30px;
        border: none;
        color: white;
        background: yellowgreen;
        border-radius: 5px;
      }
      .ani-container > div {
        animation: zx 5s linear 1s;
        display: none;
        position: absolute;
        line-height: 50px;
        text-align: center;
        background: yellow;
        width: 50px;
        height: 50px;
      }
      .ani-container {
        height: 300px;
      }
      @keyframes zx {
        0% {
          left: 0%;
        }
        100% {
          left: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="btn-container">
      <button>satrt</button>
    </div>
    <div class="ani-container">
      <div id="sloder">滑块</div>
    </div>
    <script>
      let btn = document.querySelector("button");
      let sloder = document.getElementById("sloder");
      btn.onclick = function () {
        sloder.style.display = "unset";
      };
    </script>
  </body>
</html>
